<template>
  <view class="task-page">
    <view class="task-head">
      <up-tabs :list="list1" :current="current" lineColor="linear-gradient(90deg, #A4682F 0%, transparent 100%)"
        lineHeight="16rpx" :lineWidth="current== 0 ? '128rpx' : '96rpx'" :activeStyle="{
          color: '#333333', 
          fontWeight: '500',
          fontSize:'32rpx'}" :inactiveStyle="{
           color: '#666666',
           fontWeight: '400',
           fontSize:'28rpx'}" @click="onExpert"></up-tabs>
      <view class="head-boxs">
        <view :class="statusActive === item.id ?'box-active':'box-nav'" v-for="item,index in statusList" :key="item.id"
          @click="onstatus(item.id)">{{item.name}}</view>
      </view>
    </view>
    <view class="content-nav">
      <mescroll-uni @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback" :fixed="false">
        <view class="detail-nav">
          <view class="nav-content" v-for="item,index in orderList" :key="index" @click="onDetail(item)">
            <view class="content-img">
              <image :src="item.task_image[0].image" mode="" class="image"></image>
            </view>
            <view class="content-info">
              <view class="info-status" v-show="item.label !== 0">
                <image src="@/static/home/image/truth.png" mode="" v-show="item.label ==1"></image>
                <image src="@/static/home/image/fake.png" mode="" v-show="item.label ==-1"></image>
                <image src="@/static/home/image/question.png" mode="" v-show="item.label ==2"></image>
              </view>
              <view class="info-head">
                <image :src="item.user.avatar" mode="" class="head-avatar"></image>
                <view class="head-name">{{item.user.nickname}}</view>
              </view>
              <view class="info-title">{{item.desc}}</view>
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<script setup>
  import {
    taskList
  } from '../api.js'
  import {
    ref,
    reactive,
    nextTick
  } from 'vue'
  import {
    onLoad,
    onShow,
    onPageScroll,
    onReachBottom
  } from '@dcloudio/uni-app';
  import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
  const {
    mescrollInit,
    downCallback,
    getMescroll
  } = useMescroll(onPageScroll, onReachBottom)
  const orderList = ref([])
  const current = ref(0)
  const currentIndex = ref()
  const upOption = ref({
    empty: {
      tip: '~ 暂无鉴定内容 ~'
    }
  })
  const list1 = reactive([{
      name: '全部鉴定',
      id: 0
    },
    {
      name: '未鉴定',
      id: 1
    },
    {
      name: '已鉴定',
      id: 2
    }
  ]);
  const statusActive = ref()
  const statusList = ref([])

  onLoad((e) => {
    statusList.value = uni.getStorageSync('categoryList')
    statusActive.value = uni.getStorageSync('categoryList')[0].id
    if (e && e.id) {
      current.value = e.id
    }
  })
  onShow(() => {
    nextTick(() => {
      downCallback()
    })
  })

  function onDetail(item) {
    if (item.status == 2) {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyResult?id=${item.id}`
      })
    } else if (item.status == 1) {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyExport?id=${item.id}`
      })
    }
  }

  function onstatus(id) {
    statusActive.value = id
    orderList.value = []
    downCallback()
  }

  function onExpert(e) {
    current.value = e.index
    currentIndex.value = e.id
    orderList.value = []
    downCallback()
  }
  const upCallback = (mescroll) => {
    taskList({
      category_id: statusActive.value,
      type: current.value,
      page: mescroll.num
    }).then(res => {
      const curPageData = res.data.data || [] // 当前页数据
      const totalPage = res.data.total
      if (mescroll.num == 1) orderList.value = []; // 第一页需手动制空列表      
      orderList.value = orderList.value.concat(curPageData); //追加新数据
      mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
      mescroll.endSuccess(curPageData.length)
    }).catch(() => {
      mescroll.endErr()
    })
  }
</script>

<style lang="scss" scoped>
  .task-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;

    .task-head {
      background-color: #fff;
      display: flex;
      flex-direction: column;
      position: sticky;
      z-index: 2;

      ::v-deep .u-tabs__wrapper__nav__line {
        border-radius: 0;
        bottom: 16rpx;
      }

      ::v-deep .u-tabs__wrapper__nav__item {
        padding: 0 24rpx;
        flex: 1;
        z-index: 1;

      }

      .head-boxs {
        width: 100%;
        height: 96rpx;
        opacity: 1;
        background: #FFFFFF;
        border-top: 2rpx solid #EBEBEB;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 30rpx;
        overflow: scroll;

        .box-nav {
          height: 56rpx;
          border-radius: 342rpx;
          background: #F2F2F2;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          padding: 0 40rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-right: 16rpx;
          flex: 0 0 auto;
        }

        .box-active {
          height: 56rpx;
          border-radius: 342rpx;
          background: #A4682F;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          padding: 0 40rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #fff;
          background: #A4682F;
          margin-right: 16rpx;
          flex: 0 0 auto;
        }
      }
    }

    .content-nav {
      width: 100%;
      flex: 1;
      margin: 30rpx 0;
      overflow: scroll;
      box-sizing: border-box;
      padding: 0 30rpx;
    }

    .detail-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .nav-content {
        width: 336rpx;
        height: 464rpx;
        border-radius: 16rpx;
        background: #FFFFFF;
        margin-bottom: 20rpx;
        overflow: hidden;

        .content-img {
          width: 336rpx;
          height: 336rpx;
          position: relative;

          .img-mask {
            width: 336rpx;
            height: 336rpx;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.6);
            opacity: 0.6;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1;

            .mask-title {
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              margin-top: 12rpx;
            }
          }

          .image {
            width: 336rpx;
            height: 336rpx;
          }
        }

        .content-info {
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding: 20rpx;
          position: relative;

          .info-status {
            position: absolute;
            right: 16rpx;
            top: -46rpx;
            height: 96rpx;
            width: 96rpx;
            border-radius: 50%;
            z-index: 1;
            background-color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
              height: 80rpx;
              width: 80rpx;
            }
          }

          .info-head {
            display: flex;
            align-items: center;

            .head-avatar {
              height: 36rpx;
              width: 36rpx;
              border-radius: 50%;
            }

            .head-name {
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              margin-left: 8rpx;
            }
          }

          .info-title {
            font-size: 26rpx;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-top: 12rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
</style>